<template>
	<view class="plr30 pt20">
		<!-- 未绑定 -->
		<view class="header_w h300 mb30 b-primary border-r1" v-if="isShow&&list.length==0">
			<view class="header_img"><image src="/static/bg_wdqb.png" mode="widthFix" style="width: 100%;"></image></view>
			<view class="pos_r flex_aj pw100 ph100 cf">未绑定</view>
		</view>
		<!-- 绑定 -->
		<block v-for="item in list" :key="item.id">
			<view class="header_w h300 mb70 b-primary border-r1">
				<view class="header_img"><image src="/static/bg_wdqb.png" mode="widthFix" style="width: 100%;"></image></view>
				<view class="pos_r pw100 ph100 p30 cf">
					<view class="h60">卡号：{{item.card_number}}</view>
					<view class="mb80">绑定时间：{{item.updated_time | formatTime}}</view>
					<view class="flex_aj h60">
						<view class=" mr60">
							<u-button type="primary" size="mini" plain shape="circle" @click="routerLink({ path: '/pages/user/myOrder/index',query: {cardNo: item.card_number,activeTab:1} })"><text class="plr24 ft28">充电记录</text></u-button>
						</view>
						<view class="">
							<u-button type="primary" size="mini" plain shape="circle" @click="cancelIc(item)"><text class="plr24 ft28">注销或挂失</text></u-button>
						</view>
					</view>
				</view>
			</view>
		</block>
		<view class="plr60 pt140" v-show="list.length < 3">
			<u-button type="primary" shape="circle" @click="routerLink({ path: '/pages/user/iccard/bindIc' })">绑定IC卡</u-button>
			<view class="h80 lh80 tac c9">提示：至多绑定3张</view>
		</view>
	</view>
</template>

<script>
import {icList,icCancel} from '@/api/user.js'
export default {
	name: 'iccard',
	data() {
		return {
			isShow: false,
			list:[]
		}
	},
	onShow() {
		this.icList()
	},
	methods: {
		async icList() {
			const res = await icList()
			this.isShow = true
			this.list = res.data
		},
		// 注销ic卡
		cancelIc(item) {
			this.confirm({
				title: '确定要注销此IC卡',
				content: '注销后将无法继续使用该卡'
			}).then(res => {
				if(res.confirm) {
					this.icCancel(item)
				}
			})
		},
		async icCancel(item){
			const res = await icCancel({cardId: item.id})
			this.icList()
		}
	}
}
</script>

<style lang="scss" scoped>
.header_w {
	position: relative;
	.header_img {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 0;
		height: 300upx;
		width: 100%;
	}
}
</style>
